<template>
  <div>
    <div class="left">
      <ButtonGroup vertical>
        <Button
          :type="toolButtonState.poi"
          size="large"
          icon="md-pin"
          title="标记POI"
          @click="requestDrawPOI"
        ></Button>
        <Divider />
        <vue-xlsx-table @on-select-file="handleExcelImport" title="导入Excel">
          <Icon type="ios-folder-open" />
        </vue-xlsx-table>
        <Divider />
        <Button
          type="text"
          size="large"
          icon="md-archive"
          title="导出JSON文件"
          @click="exportJSON"
        ></Button>
      </ButtonGroup>
    </div>
    <div class="right">
      <keep-alive>
        <component
          :is="formComponentName"
          v-show="showForm"
          :excel-data="excelDataNode"
        ></component>
      </keep-alive>
    </div>
    <k-datatable
      v-if="showDataTable"
      :table-data="excelData"
      :current-row-index="currentExcelIndex"
    ></k-datatable>
  </div>
</template>

<script>
import config from "@/config/global";
import { busEventEmit, busEventHandle } from "@/teleport/bus";
import jsonDownloader from "@/libs/exportJSON";

export default {
  name: "",
  data() {
    return {
      showForm: false,
      showDataTable: false,
      formComponentName: "k-form-poi",
      toolButtonState: {
        poi: "text",
      },
      excelData: [],
      excelDataNode: {},
      currentExcelIndex: 0,
      result: [],
    };
  },
  components: {
    "k-form-poi": () => import("@/components/form/FormPOI"),
    "k-datatable": () => import("@/components/DataTable"),
  },
  methods: {
    requestDrawPOI() {
      if(this.toolButtonState.poi === 'text'){
        this.toolButtonState.poi = "primary";
        busEventEmit("poi-draw-request"); //To AMap
      }else{
        this.toolButtonState.poi = 'text';
        busEventEmit("poi-draw-cancel");
      }
    },
    handleExcelImport(data) {
      this.showDataTable = true;
      this.excelData = data.body;
      this.currentExcelIndex = 0;
      store.useExcel = true;
      store.excelLength = this.excelData.length;
    },
    listenDrawnEvent() {
      const $this = this;
      busEventHandle("poi-drawn", (msg) => {
        $this.currentExcelIndex = msg.poiCount;
        if (store.useExcel && $this.currentExcelIndex < store.excelLength) {
          $this.excelDataNode = $this.excelData[$this.currentExcelIndex];
          $this.excelDataNode.coord = msg.coord;
        } else if (!store.useExcel) {
          $this.excelDataNode = { coord: msg.coord };
        }
        $this.showForm = true;
      });
    },
    listenPOIEditEvent() {
      const $this = this;
      busEventHandle('poi-edit',msg=>{
        let result = $this.result.find(e=>{
          return e.id === msg.id
        });
        result.coord = msg.coord;
        busEventEmit('update-form-data',result);
      })
    },
    listenPOIDataCompleteEvent() {
      busEventHandle("push-poi-result", (msg) => {
        this.result.push(JSON.parse(msg));
      });
      busEventHandle('mutant-poi-result',msg=>{
        let msgObject = JSON.parse(msg);
        let resultNode = this.result.find(e=>{
          return e.id === msgObject.id
        });
        resultNode = JSON.parse(JSON.stringify(msgObject));
      })
      busEventHandle('delete-poi-result',msg=>{
        debugger
        this.result = this.result.filter(e=>{
          return e.id !== msg
        });
      })
    },
    exportJSON() {
      jsonDownloader(this.result, "poi-list.json");
    },
  },
  created() {
    this.listenDrawnEvent();
    this.listenPOIDataCompleteEvent();
    this.listenPOIEditEvent();
  },
};
</script>

<style scoped>
</style>